Tableros de Quarto® - Shiny
Encuentro 10
Cabecera YAML
Una cabecera YAML para tableros de Quarto interactivos Shiny se asemeja a lo visto en el encuentro pasado pero incorpora la opción server.
Las otras opciones conocidas para cabeceras de tableros funcionan igual (logos, botones, etc)
Estructura de un shiny
La estructura de estos tableros necesitan de dos componentes:
la interfaz de usuario (ui)
Que es visible y la integran los dispositivos de entrada
el servidor Shiny (server)
Que no es visible y se encarga de traducir los cambios efectuados en la ui en reacciones del producto visualizado (gráfico, tabla, etc)
Además, siempre habrá una área donde se visualizan los elementos interactivos.
Interfaz de usuario
La interfaz de usuario puede estar compuesta por una o varias entradas de datos (inputs).
Los inputs se pueden disponer de varias formas:
- Barras laterales
- Barras de herramientas
- Cabecera de tarjetas
Barras laterales
Una barra lateral global se configura con:
---
title: "Mi tablero"
format: dashboard
server: shiny
---
## {.sidebar}
```{r}
# input 1
# input 2
```Se le llama global porque esta presente siempre aunque tengamos múltiples páginas y pasemos de una a otra.
Barra lateral global
Barra lateral en línea
Las barras laterales también se puede ubicar dentro del diseño del tablero, por ejemplo en una misma fila de dos columnas (una barra lateral y otra donde se muestra un gráfico asociado)
Barra lateral en línea
Barra lateral a derecha
Las barras laterales se pueden ubicar en el lado izquierdo o derecho. También puede modificar el tamaño de las barras laterales mediante el atributo width.
Barra lateral a derecha
Barra de herramientas
Las barras de herramientas son similares a las barras laterales, pero ofrecen un diseño horizontal. Se crean agregando la clase .toolbar a un encabezado de fila de nivel 2.
Barra de herramientas
Barra de herramientas
Al igual que las barras laterales, las barras de herramientas pueden ser globales o en línea, es decir definidas dentro del diseño. Por ejemplo, a nivel columna.
También se puede ubicar debajo del gráfico si invertimos el orden de las filas.
Cabecera de tarjetas
Para agregar una barra de herramientas a una tarjeta, se define inmediatamente encima o debajo de la celda que genera la salida. Se puede hacer agregando el metadato content: card-toolbar a un fragmento de código R o creando un div con la clase .card-toolbar
Cabecera de tarjetas
Barra lateral de tarjetas
De la misma forma se puede agregar una barra lateral solo a una tarjeta, aplicando la clase .card-sidebar
Inputs
Dentro de las barras, sean estas globales, laterales, de tarjeta, etc vamos a incluir las entradas (inputs) que vienen preseteados con Shiny a modo de funciones.
Hay una variedad de posibilidades, entre las cuales se encuentra:
Inputs
Hay funciones de entradas directas como numericInput() para datos numéricos, textInput() para texto y dateInput() para fechas; rangos como dateRangeInput(), botones tipo actionButton() o radioButtons() y barras de desplazamiento como sliderInput().
Los sufijos de estas funciones pueden ser generalmente Input para entradas de valores o Buttons para pulsar botones.
Todas las funciones de entrada tienen un argumento donde se define la variable que va a tomar el o los valores que el usuario determine, llamada inputID.
Esta variable será utilizada luego en la parte del servidor para reaccionar de forma interactiva a sus cambios.
Inputs
Ejemplo de una función de Input numérica:
```{r}
#| content: card-sidebar
shiny::numericInput(inputID = numero,
label = "Número:",
value = 10,
min = 1,
max = 100)
```Construye un input numérico, bajo la etiqueta “Número:” con un valor predeterminado de 10, sobre una escala de 1 a 100 que se almacena en la variable numero.
Inputs
Ejemplo de una función Input de botones de opción (RadioButtons):
```{r}
#| content: card-sidebar
shiny::radioButtons(inputId = "dist",
label = "Tipo de distribución:",
choices = c("Normal" = "norm",
"Uniforme" = "unif",
"Log-normal" = "lnorm",
"Exponencial" = "exp"),
selected = "Normal")
```Construye un input de botones de opción, bajo la etiqueta “Tipo de distribución:” con una opción seleccionada en “Normal”, sobre 4 opciones declaras en choices que se almacena en la variable dist.
Inputs
Ejemplo de una función Input de desplazamiento (slideInput):
```{r}
sliderInput(inputID = "obs",
label = "Número de observaciones:",
min = 0,
max = 1000,
value = 500,
step = 10
)
```Construye un input de desplazamiento, bajo la etiqueta “Número de observaciones:” con un valor predeterminado en 500 de una escala entre 0 y 1000, con saltos de 10 en 10, que se almacena en la variable obs.
Servidor
El bloque servidor se declara con el metadato #| context: server. Dentro se utilizan las funciones de Shiny para hacer reactivas a los inputs a determinadas partes de lo que se está construyendo (por ejemplo: un gráfico).
También se utiliza la función reactive() en general, para construir expresiones reactivas.
La expresión va encerrada entre llaves y contiene un filtro asociado a un input numérico (input$numero). El dataframe datos va a cambiar cada vez que cambien el ingreso del número, filtrando las observaciones que tengan ese valor en var1 en los datos proveniente de la lectura (datos_leídos).
Servidor
Otra función que se incluye en el bloque servidor, relacionada con gráficos es renderPlot().
```{r}
#| context: server
output$grafico <- renderPlot({
datos() |>
ggplot(aes(input$x, input$y)) +
geom_point()
```La expresión dentro de renderPlot() va entre llaves y contiene un gráfico ggplot. Las variables declaradas en x e y provienen de inputs.
La salida se almacena en la variable output$grafico que se va actualizar cada vez que el gráfico se desarrolle con variables x o y nuevas.
Salidas reactivas
Toda entrada de datos interactiva va a comunicarse con el código escrito en el área servidor, como vimos en las diapositivas anteriores, y la o las salidas finales se van a mostrar en bloques de código dentro de tarjetas o dispuestas directamente en filas o columnas.
Shiny trae funciones de salidas que finalizan con la palabra Output, como plotOutput() para presentar gráficos provenientes de renderPlot() o textOutput() para textos de renderText().
Por ejemplo, para visualizar el renderPlot anterior necesitaremos hacer:
Temas
- Salidas reactivas
- Parámetros
- Lectura de datos dinámica - goggledrive - rdrop2
Instituto Nacional de Epidemiología